<template>
  <div>
    <el-card>
      <div class="dodiv">
      <div>
        <el-form :inline="true">
          <el-form-item
            ><el-input placeholder="请输入教师名称" v-model="keyword"></el-input
          ></el-form-item>
          <el-form-item
            ><el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              >搜 索</el-button
            ></el-form-item
          >
        </el-form>
      </div>
      <div class="add">
        <el-button type="success" @click="handleAdd" icon="el-icon-plus"
          >添 加</el-button
        >
      </div>
      </div>
    </el-card>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed label="序号" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          label="楼栋名"
          align="center"
          property="storiedName"
        ></el-table-column>
        <el-table-column
          label="宿舍号"
          align="center"
          property="dormitoryNum"
        ></el-table-column>
        <el-table-column
          label="宿舍成员"
          align="center"
          property="dormitoryMembers"
        ></el-table-column>
        <el-table-column
          label="舍长"
          align="center"
          property="dormitroySupervisor"
        ></el-table-column>
        <el-table-column
          label="是否为空"
          align="center"
          property="isNull"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-dialog :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="formDemo" class="dofrom">
            <el-form-item
              label="楼栋名:"
              :label-width="formLabelWidth"
              prop="storiedName"
            >
              <el-input
                v-model="form.storiedName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="宿舍号:"
              :label-width="formLabelWidth"
              prop="dormitoryNum"
            >
              <el-input
                v-model="form.dormitoryNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="宿舍成员:"
              :label-width="formLabelWidth"
              prop="dormitoryMembers"
            >
              <el-input
                v-model="form.dormitoryMembers"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="舍长:"
              :label-width="formLabelWidth"
              prop="dormitroySupervisor"
            >
              <el-input
                v-model="form.dormitroySupervisor"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="是否为空:"
              :label-width="formLabelWidth"
              prop="isNull"
            >
              <el-radio v-model="form.isNull" label="true">是</el-radio>
              <el-radio v-model="form.isNull" label="false">否</el-radio>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div>
      <el-pagination class="dofenye"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
        background
      >
      </el-pagination>
    </div>
    </el-card>
  </div>
</template>

<script>
import { GetDormitoryList } from "@/api/dormitoryapi";
export default {
  data() {
    return {
      keyword: "",
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {},
      rules: {
        storiedName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入宿舍楼",
          },
        ],
        dormitoryNum: [
          {
            required: true,
            trigger: "blur",
            message: "请输入宿舍号",
          },
        ],
        dormitoryMembers: [
          {
            required: true,
            trigger: "blur",
            message: "请输入宿舍成员",
          },
        ],
        dormitroySupervisor: [
          {
            required: true,
            trigger: "blur",
            message: "请输入舍长姓名",
          },
        ],
        isNull: [
          {
            required: true,
            trigger: "blur",
            message: "请选择是否为空",
          },
        ],
      },
      pager: {
        pageIndex: 1,
        rowsTotal: 100,
      },
    };
  },
  mounted() {
    this.GetList();
  },
  methods: {
    GetList() {
      console.log("获取列表");
      GetDormitoryList().then((res) => {
        console.log(res);
        var istable = [];
        istable = res.data;
        console.log(istable);
        istable.forEach((item) => {
          if (item.isNull === true) {
            item.isNull = "空";
          } else {
            item.isNull = "不为空";
          }
        });
        this.tableData = istable;
      });
    },
    handleQuery() {
      if (this.keyword == "") {
        this.$message.warning("查询条件不能为空");
        this.keyword = "";
        return;
      }
      console.log("你输入的查询条件:" + this.keyword);
    },
    handleAdd() {
      this.dialogFormVisible = true;
    },
    handleEdit() {
      this.dialogFormVisible = true;
    },
    handleCancel() {
      this.dialogFormVisible = false;
    },
    handleSave() {
      this.dialogFormVisible = false;
    },
  },
};
</script>
<style>
.dodiv{
  display: flex;
  float: left;
}
.dofrom > .el-form-item > .el-form-item__label {
  font-weight: bolder !important;
  font-size: 18px;
}
.dofenye {
  margin-top: 30px;
  margin-bottom: 10px;
}
</style>
